<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";
	import {
		searchDataZhbz
	} from "@/api/search";
	import {
		addOrUpdateZhbz
	} from "@/api/addOrUpdate";


	const city = window.globalObj.name;
	const editorRef = shallowRef();
	const editorRef1 = shallowRef();
	const editorRef2 = shallowRef();
	const editorRef3 = shallowRef();

	const toolbarConfig = {};
	const toolbarConfig1 = {};
	const toolbarConfig2 = {};
	const toolbarConfig3 = {};
	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");
	const mode1 = ref("default");
	const mode2 = ref("default");
	const mode3 = ref("default");

	// 加载html
	const initHtml = () => {
		searchDataZhbz({
			m: "疏散掩蔽场所保障"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "人防工程保障组织实施方法")?.v || "";
			valueHtml1.value = data.find((x) => x.k === "疏散地域保障组织实施方法")?.v || "";
			valueHtml2.value = data.find((x) => x.k === "疏散基地保障组织实施方法")?.v || "";
			valueHtml3.value = data.find((x) => x.k === "兼顾人防要求的地下工程保障组织实施方法")?.v || "";
		})
	};

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated1 = (editor) => {
		editorRef1.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated2 = (editor) => {
		editorRef2.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated3 = (editor) => {
		editorRef3.value = editor; // 记录 editor 实例，重要！
	};

	const valueHtml = ref(
		"由人防部门统一计划、逐级分块组织保障和检查督导；临战前，由建设单位或管理使用单位按计划组织改造加固、维护管理等平战转换工作及相关保障；组织人员利用防护工程掩蔽时，由街道和社区组织指挥协调及相关保障；抢救抢修时，由人防、重要目标单位抢救抢修专业队组织抢险抢修及相关保障工作。 所需保障装备、物资、器材均以建设单位、使用单位自行保障为主，不足部分逐级申请上级调拨或经费补助。"
	);

	const valueHtml1 = ref(
		"由人防部门会同疏散地域所在县（区）统一计划、组织保障和检查督导；临战前，由疏散地域所在县（区）、乡（镇）、村（屯）按计划组织改造加固、维护管理等平战转换工作及相关保障；组织人员疏散时，由相关的县（区）、街道（乡、镇）、社区（村、屯）共同组织人员撤离、接收等疏散保障；抢救抢修时，由疏散地域所在县（区）、街道（乡、镇）、社区（村、屯）组织抢险抢修及相关保障工作，必要时可申请动用县（区）人防专业队协助开展抢救抢修等相关保障工作。 所需保障装备、物资、器材均以担负疏散任务的相关单位自行保障，不足部分逐级申请上级调拨或经费补助。"
	)

	const valueHtml2 = ref(
		"疏散基地的检查督导、改造加固、维护管理、抢险抢修均由本级人防部门负责保障。"
	)
	const valueHtml3 = ref(
		"由人防部门统一计划，组织保障和检查督导；临战前，由工程所属单位按计划组织改造加固、维护管理等平战转换工作及相关保障；组织人员利用工程掩蔽时，由工程所属单位组织指挥协调及相关保障；抢救抢修时，由工程所属单位为主组织抢险抢修及相关保障工作，必要时可逐级申请人防专业队、驻军部队协助支援抢救抢修等相关保障工作。 所需保障装备、物资、器材均以辖区政府提供保障为主。"
	)

	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateZhbz({
					m: "疏散掩蔽场所保障",
					data: [{
							k: "人防工程保障组织实施方法",
							v: valueHtml.value,
						},
						{
							k: "疏散地域保障组织实施方法",
							v: valueHtml1.value,
						},
						{
							k: "疏散基地保障组织实施方法",
							v: valueHtml2.value,
						},
						{
							k: "兼顾人防要求的地下工程保障组织实施方法",
							v: valueHtml3.value,
						}
					],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}

	onMounted(() => {
		initHtml();
	});
	onBeforeUnmount(() => {
		const editor = editorRef.value;
		const editor1 = editorRef1.value;
		const editor2 = editorRef2.value;
		const editor3 = editorRef3.value;
		if (!editor) return;
		if (!editor1) return;
		if (!editor2) return;
		if (!editor3) return;
		editor.destroy();
		editor1.destroy();
		editor2.destroy();
		editor3.destroy();
	});
</script>
<template>
	<div class="">
		<div class="top-15">
			主要明确人防工程、疏散地域、疏散基地、兼顾人防要求的地下工程的检查督导、改造加固、维护管理、抢险抢修等工作的组织实施方法。
		</div>
		<FirstTitle name="人防工程保障组织实施方法" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>

		<FirstTitle name="疏散地域保障组织实施方法" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef1" :defaultConfig="toolbarConfig1"
				:mode="mode1" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml1" :defaultConfig="editorConfig"
				:mode="mode1" @onCreated="handleCreated1" />
		</div>

		<FirstTitle name="疏散基地保障组织实施方法" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef2" :defaultConfig="toolbarConfig2"
				:mode="mode2" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml2" :defaultConfig="editorConfig"
				:mode="mode2" @onCreated="handleCreated2" />
		</div>

		<FirstTitle name="兼顾人防要求的地下工程保障组织实施方法" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef3" :defaultConfig="toolbarConfig3"
				:mode="mode3" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml3" :defaultConfig="editorConfig"
				:mode="mode3" @onCreated="handleCreated3" />
		</div>



		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>